<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>校园活动提醒列表</title>
</head>
<body>
  <div id="app">
    <h2>添加校园活动</h2>
    <!-- 表单输入部分 -->
    <input v-model="newName" placeholder="活动名称">
    <input v-model="newTime" placeholder="活动时间">
    <input v-model="newLocation" placeholder="活动地点">
    <button @click="addActivity">添加活动</button>
    
    <h2>活动列表</h2>
    <!-- 使用 v-for 渲染活动列表 -->
    <ul>
      <li v-for="(activity, index) in activities" :key="index">
        {{ activity.name }} - {{ activity.time }} - {{ activity.location }}
      </li>
    </ul>
  </div>

  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        // 表单数据
        newName: '',
        newTime: '',
        newLocation: '',
        // 存放活动的数组
        activities: []
      },
      methods: {
        addActivity: function(){
          // 如果有任一输入为空，则提醒用户
          if (this.newName === '' || this.newTime === '' || this.newLocation === '') {
            alert('请填写所有字段！');
            return;
          }
          // 将输入的数据封装成一个对象
          var activity = {
            name: this.newName,
            time: this.newTime,
            location: this.newLocation
          };
          // 将对象添加到活动数组中
          this.activities.push(activity);
          // 清空输入框，便于继续添加活动
          this.newName = '';
          this.newTime = '';
          this.newLocation = '';
        }
      }
    });
  </script>
</body>
</html>
